<template>
	
	<!-- 选择发布类型 -->
	<HelpTypePopup v-if="showHelpTypePopup" />
	
	<!-- 底部导航 -->
	<view class="tab-bar">
		<view v-for="(item, index) in tabList" :key="index" class="tab-bar-item" 
			:class="{active: currentTab === index}"
			@click="switchTab(index, item)">
			
			<!-- 中间的 -->
			<template v-if="index !== 2">
				<uni-icons :type="item.icon" size="20"
					:color="currentTab === index ? activeColor : inactiveColor">
				</uni-icons>
				<text>{{item.text}}</text>
			</template>
			
			<template v-else>
				<view class="post-button">
					<uni-icons type="plus" size="24" color="#fff"></uni-icons>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import HelpTypePopup from '@/pages_help/components/helpTypePopup'

	const props = defineProps({
		activeColor: {
			type: String,
			default: '#7894ec'
		},
		inactiveColor: {
			type: String,
			default: '#666'
		},
		initialTab: {
			type: Number,
			default: 0
		}
	});
	
	// 选择发布类型，是否展示
	const showHelpTypePopup= ref(true);

	const emit = defineEmits(['tabChange']);

	//	当前选中的 tab 下标
	const currentTab = ref(props.initialTab);
	const currentTab_index= uni.getStorageSync('currentTab_index');
	if(currentTab_index){
		currentTab.value= currentTab_index;
		uni.removeStorage('currentTab_index')
	}

	const tabList = ref([{
			text: '首页',
			icon: 'home',
			path: '/pages/index/index'
		},
		{
			text: '互助',
			icon: 'help',
			path: '/pages/help/help'
		},
		{
			text: '发帖',
			icon: 'plus',
			path: '/pages/post/post'
		},
		{
			text: '消息',
			icon: 'notification',
			path: '/pages/message/message'
		},
		{
			text: '我的',
			icon: 'person',
			path: '/pages/my/my'
		}
	]);

	const switchTab = (index, item) => {
		if (currentTab.value === index) return;

		console.log('切换tab', index===2, index, item)
		
		if(index===2){
			showHelpTypePopup.value= !showHelpTypePopup.value;
			// #ifdef MP-WEIXIN
				uni.showToast({
					icon: 'none',
					title: '小程序选择发布类型有问题，有需要联系开发者 gy_sqsbxlqq'
				})
			// #endif
		} else {
			showHelpTypePopup.value= false;
			currentTab.value = index;
			
			uni.setStorageSync('currentTab_index', index)
			uni.reLaunch( {url: item.path} )
			// uni.switchTab({
			// 	url: item.path
			// });
			
			emit('tabChange', index);
		}
	};
</script>

<style lang="scss" scoped>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		background-color: #fff;
		box-shadow: 0 -1rpx 5rpx rgba(0, 0, 0, 0.05);
		z-index: 1000;

		.tab-bar-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
			color: v-bind('props.inactiveColor');
			flex: 1;

			&.active {
				color: v-bind('props.activeColor');
			}

			.post-button {
				position: relative;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: v-bind('props.activeColor');
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2rpx 8rpx rgba(7, 193, 96, 0.3);
			}
		}
	}
</style>